<template>
	<view class="container page-address-add">
		<view class="module-form">
			<view class="uni-form-item">
				<view class="title">姓名：</view>
				<input class="uni-input" placeholder="请输入银行卡持有人" />
			</view>
			<view class="uni-form-item">
				<view class="title">手机号码：</view>
				<input class="uni-input" placeholder="请输入银行预留号码" />
			</view>
			<view class="uni-form-item">
				<view class="title">银行卡号：</view>
				<input class="uni-input" placeholder="请输入银行卡号" />
			</view>
			<view class="uni-form-item">
				<view class="title">开户银行：</view>
				<input class="uni-input" placeholder="请选择开户银行" />
			</view>
			<view class="item-default">
				<label>
					<checkbox :checked="post.isDefault" />
					设为默认银行卡
				</label>
			</view>
		</view>
		<simpleAddress
			ref="simpleAddress"
			:pickerValueDefault="cityPickerValueDefault"
			@onConfirm="onConfirm"
			themeColor="#007AFF"
		></simpleAddress>
		<view class="module-button">
			<button type="main" class="button-save">保存</button>
		</view>
	</view>
</template>

<script>
import simpleAddress from '@/components/simple-address/simple-address.vue';
export default {
	components: {
		simpleAddress,
	},
	data() {
		return {
			post: {
				area: '',
				isDefault: false,
			},
			areaTips: '选择所在省份、城市、区县',
			cityPickerValueDefault: [0, 0, 0],
		};
	},
	onLoad() {},
	methods: {
		openAddres() {
			this.$refs.simpleAddress.open();
		},
		onConfirm(e) {
			this.cityPickerValueDefault = e.value;
			this.post.area = e.label;
		},
	},
};
</script>

<style lang="scss">
.page-address-add {
	.uni-form-item {
		background: #fff;
		border-bottom: 1px solid #eee;

		.title {
			width: 140rpx;
			padding: 10rpx 16rpx;
		}

		.uni-input {
			padding: 14rpx;
		}
		.iconjiantou {
			width: 80rpx;
			line-height: 80rpx;
			color: #777;
		}
	}
	.item-default {
		padding: 16rpx 34rpx 28rpx;
		color: #777;
	}
	.module-button {
		padding: 32rpx 24rpx;

		.button-save {
			padding: 2rpx 20rpx;
			border-radius: 28px;
			font-size: 32rpx;
		}
	}
}
</style>
